<template>
  <div class="flex justify-between items-center h-16">
    <go-back></go-back>
    <div>
      <h1 class="text-xl font-bold">音乐网站</h1>
    </div>
    <div>
      <v-header></v-header>
    </div>
  </div>
  <router-view></router-view>
  <play-component></play-component>
</template>

<script setup lang="ts">
  import { ref, reactive } from "vue";
  import vHeader from "../components/Header/Header.vue";
  import goBack from "../components/Header/goBack.vue";
  import playComponent from "../components/playComponent/index.vue";
  import { userPlayerInit } from "../store/songPlay";

  userPlayerInit()

  let tag = ref(0);
  //点击事件
  const navClick = (url: string, index: number) => {
    tag.value = index;
  };
</script>

<style scoped lang="scss">
  .text-change {
    @apply 2xl:text-xl xl:text-lg lg:text-base md:text-sm sm:text-xs;
  }
  .padding-change {
    @apply 2xl:p-5 xl:p-4 lg:p-3 md:p-2 sm:p-1;
  }
</style>
